<template>
  <div>
    <Header></Header>

    <div class="back-p">
      <div @click="toBack" class="back-btn">
        <DoubleLeftOutlined />
        返回
      </div>

    </div>

    <div class="overview">

      

      <img v-if="goods.imgList" class="go-img" :src="goods.imgList![0]" alt="" srcset="">
      <div class="go-info">
        <div class="go-name">{{ goods.name }}</div>
        <div class="company">供应商： {{ goods.company?.name }}</div>
        <div class="price">商品价格：<label class="price-num">{{ goods.price! / 100 }}</label> 元/{{ goods.unit }}</div>
      </div>
    </div>
    <div class="detial ql-editor" v-html="goods.remark">

    </div>
    <Footer></Footer>
  </div>
</template>
<script setup lang="ts">
import { DoubleLeftOutlined } from "@ant-design/icons-vue"
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import Footer from './footer.vue';
import Header from './header.vue';
import { useRouter } from "vue-router"
import type { Goods } from '@/types/Goods'
import { useGoodsStore } from '@/stores/goods'
import { getGoodsList } from '@/api/goodsApi';
import { onMounted, ref } from 'vue';
const router = useRouter()
const goodsStore = useGoodsStore()
const goods = ref<Goods>({})
onMounted(() => {
  goods.value = goodsStore.updateGoods
})
const toBack = () => {
  window.history.back()
  // router.go(-1)
}
</script>
<style scoped>
.overview {
  width: 1200px;
  margin: 20px auto;
  background: #fff;
  padding: 20px;

  box-sizing: border-box;
  display: flex;
  justify-content: start;
  align-items: start;
}

.go-img {
  width: 280px;
  height: 200px;
  object-fit: cover;
}

.go-info {
  padding: 0 0 0 30px;
}

.go-name {
  font-size: 30px;
  padding: 0 0 30px 0;
}

.company {
  padding: 0 0 10px 0;
  color: #333;
}

.price {
  padding: 0 0 10px 0;
  color: #333;

}

.price-num {
  color: var(--danger-color);
}

.detial {
  min-height: 400px;
  width: 1200px;
  margin: 0 auto;
  background: #fff;
}
.back-p{
  width: 1200px;
  margin: 20px auto;
}
.back-btn{
  display: inline-block;
  cursor: pointer;
}
</style>